import { useState } from 'react';
import styles from './car.module.css'
import { Tag, Checkbox, Stepper, ActionBar, Button } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { useMap, useThrottleFn } from 'ahooks'
import { addList, jianList,addDai } from '../../redux2/modules/cart'
const Car = () => {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const history = useSelector((store) => store.carts.historyList)
    const ids = useSelector((store) => store.carts.ids)
    const handAdd = (item) => {
            dispatch(addList(item))
        }
        const handJian = (item) => {
            dispatch(jianList(item))
        }
    // 0购物车页面 1编辑页面 2结算页面
    const [num, setNum] = useState(0)

    // 删除的商品id
    const [delIds, setDelIds] = useState([])
    return (
        <div className={styles.body}>
            {/* 顶部 */}
            <div className={styles.top}>
                <img src="/back.svg" alt="" onClick={() => navigate(-1)} />
                <b>购物车</b>
                {num == 0 || num == 2 ?
                    <Tag color='#efefef' textColor='#555555' round>
                        <img src="/car1.svg" alt="" />
                        地址
                        <img src="/car2.svg" alt="" />
                    </Tag>
                    : ''}
                <span style={{ float: 'right' }}
                    onClick={() => {
                        if (num == 0) {
                            setNum(1)
                        } else {
                            setNum(0)
                        }
                    }}
                >{num == 0 || num == 2 ? '编辑' : '完成'}</span>
            </div>

            {/* 商品 */}
            <div className={styles.shop}>
                {/* 店名 */}
                <Checkbox
                    
                    onChange={() => {
                        if (num == 0) {
                            setNum(2)
                        } else {
                            setNum(0)
                        }
                    }}
                ><b>默林石墨肠粉早餐店(凤凰广场店)</b></Checkbox>
                {/* 商品 */}
                {
                    history.map((item, index) => {
                        return (
                            <div className={styles.food}>
                                <Checkbox   
                                checked={delIds.includes(item._id)}
                                onClick={()=>{
                                    let index = delIds.indexOf(item._id)
                                    if(index == -1){
                                        setDelIds([...delIds,item._id])
                                    }else{
                                        setDelIds(pre=>[delIds.filter(item=>item!=item._id)])
                                    }
                                }}
                                />
                                <img src="/kl.svg" alt="" />
                                <div className={styles.right}>
                                    <div className={styles.bot}>
                                        <span>{item.name}</span>
                                        {num == 1 ? <b>￥{item.price}</b> : ''}
                                    </div>
                                    <div className={styles.bot}>
                                        {num == 0 || num == 2 ?
                                            <><b>￥{item.price}</b>
                                                <Stepper
                                                    onOverlimit={() => console.log('overlimit')}
                                                    value={item.counts}
                                                    onMinus={() => handJian(item)}
                                                    onPlus={() => handAdd(item)}
                                                    onChange={v => console.log(v)}
                                                    min={1}
                                                /></>
                                            : ''}
                                        {num == 1 ? <b>x{item.counts}</b> : ''}
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }

                {num == 2 ?
                    <div className={styles.spend}>
                        <span>
                            应结算<b>￥33</b>
                        </span>
                        <Button
                            color='linear-gradient(to right,#FF9901,#FF654D)'
                            round
                            style={{ width: '35%' }}
                            onClick={() => navigate('/outlet/order')}
                        >去结算(10)</Button>
                    </div> : ''}
            </div>

            {/* 为您推荐 */}
            {num == 0 || num == 2 ?
                <div className={styles.recommend}>
                    <p className={styles.p1}>
                        <b>为</b><span>/</span>
                        <b>您</b><span>/</span>
                        <b>推</b><span>/</span>
                        <b>荐</b>
                    </p>
                    {/* 推荐商品 */}
                    <div className={styles.recbox}>
                        <div className={styles.boxItem}>
                            <img src="/food.svg" alt="" />
                            <b>香辣鸡块汉堡</b>
                            <p><b>￥18</b><Tag color='none' textColor='#797979'>月销509</Tag></p>
                            <Tag color='none' textColor='#797979'>附近热销商品</Tag>
                            <Tag color='none' textColor='black'>
                                <img src="/shop.svg" alt="" style={{ width: '0.15rem' }} />
                                华莱士-凤凰广2店
                                <img src="/right.svg" alt="" style={{ width: '0.1rem' }} />
                            </Tag>
                            <Tag color='none' textColor='#797979'>20分钟|配送费4元</Tag>
                        </div>

                    </div>
                </div>
                : ''}

            {/* 编辑的底部 */}
            {num == 1 ?
                <ActionBar style={{ padding: '.2rem' }}>
                    <Checkbox >全选</Checkbox>
                    <Button
                        color='linear-gradient(to right,#FF9901,#FF654D)'
                        round
                        style={{ width: '75%', marginLeft: '.2rem' }}
                    >删除</Button>
                </ActionBar> : ''}
        </div>
    )
}

export default Car